.popoverWrapper {
  min-width: 312px !important;

  /* Ensure popover arrow (rendered in portal) uses tooltip background as fill.
     The Arrow component uses fill: currentColor, so set color on the panel or target the Arrow class. */
  :global([class*='Composestyle__Arrow-RedisUI__']) {
    color: var(--euiTooltipBackgroundColor) !important;
  }
}

.popover {
  padding: 6px 15px 12px;
}

.helpMenuTitle {
  font-size: 18px !important;
}

.helpMenuItem {
  align-items: center;
  cursor: pointer;

  :global(.euiButtonIcon),
  :global(svg) {
    color: var(--euiTooltipTextColor) !important;
  }

  .helpMenuItemLink {
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
    color: var(--externalLinkColor) !important;

    &:hover {
      background: none !important;
      transform: translateY(-1px);
    }

    &:global(.euiLink) {
      text-decoration: none !important;
      &:focus {
        animation: none !important;
      }
    }
  }
}

.helpMenuItemRow {
  .helpMenuItemLink {
    &:not(:last-child) {
      margin-bottom: 16px;
    }

    .helpMenuTextLink {
      font-size: 13px !important;
      line-height: 16px !important;
      text-decoration: none !important;
      cursor: pointer;
      padding: 0 !important;
      color: var(--externalLinkColor) !important;

      &:hover {
        background: none !important;
        color: var(--externalLinkColor) !important;
        text-decoration: underline !important;
      }
    }
  }
}

.helpMenuItemDisabled {
  cursor: auto;
  :global(svg),
  div {
    color: var(--buttonSecondaryDisabledTextColor) !important;
  }
}

.helpMenuItemNotified {
  position: relative;
  &:before {
    content: '';
    position: absolute;
    right: 6px;
    top: -3px;
    display: block;
    width: 6px;
    height: 6px;
    background-color: var(--euiColorPrimary);
    border-radius: 100%;
  }
}

.helpMenuText {
  font-size: 13px !important;
  line-height: 1.35 !important;
}
